<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/1_.css">
  <link rel="stylesheet" href="./css/2_carouser.css">
  <link rel="stylesheet" href="./css/3_.css">

  <link rel="stylesheet" href="./css/4_changping.css">
  <link rel="stylesheet" href="./css/5_footer.css">

  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
  </style>
</head>

<body>
  <!-- <div class="container"> -->
    <!-- nav导航 -->
    <!-- navbar 基础类  navbar-dark 主题（深色类和浅色类） 可以给背景颜色 -->
    <!-- navbar-expand-lg主要负责响应式 大小菜单什么时候切换出现 -->
  
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark jlc-nav ">
      <!-- navbar-brand给logo （规格）-->
      <a href="#" class="navbar-brand">
        <img src="./img/0/1.png" alt="">
      </a>
      <!-- 缩小菜单，当低于某个宽度时，缩小菜单出现 ，缩小菜单在大屏时隐藏-->
      <button class="navbar-toggler" data-toggle="collapse" data-target="#myDiv">
        <!-- 小菜单的三条小横线 -->
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 被折叠菜单 collapse 控制消失隐藏
      navbar-collapse 管对齐方式的（样式）-->
      <div class="collapse navbar-collapse xz-menu m-0" id="myDiv">
        <!-- 菜单去 -->
        <ul class="nav d-flex">
          <li class="nav-item jlc-1">
            <a class="nav-link active bg-danger" href="#">
              首页
            </a>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              产品中心
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/4.png" alt="" class="img-fluid"></div>
                <div><img src="./img/0/5.png" alt=""  class="img-fluid"></div>
                <div><img src="./img/0/6.png" alt=""  class="img-fluid"></div>
                <div><img src="./img/0/7.png" alt=""  class="img-fluid"></div>
                <div><img src="./img/0/8.png" alt=""  class="img-fluid"></div>
                <div><img src="./img/0/9.png" alt=""  class="img-fluid"></div>
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              回馈活动
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/2.png" alt=""></div>
                <div><img src="./img/0/3.png" alt=""></div>
                <!-- <div><img src="./img/0/2.png" alt=""></div> -->
              </ol>
            </div>
          </li>
         
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              历史文化
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/10.png" alt=""></div>
                <div><img src="./img/0/11.png" alt=""></div>
                <div><img src="./img/0/12.png" alt=""></div>
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              工艺优胜
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/13.png" alt=""></div>
                <div><img src="./img/0/14.png" alt=""></div>
                <div><img src="./img/0/15.png" alt=""></div>
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              新闻资讯
            </a>
            <div id="jlc-tu1 " class="">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/16.png" alt="" ></div>
                <div><img src="./img/0/17.png" alt=""></div>
                <!-- <div><img src="./img/0/2.png" alt=""></div> -->
              </ol>
            </div>
          </li>
          <li class="nav-item jlc-2">
            <a class="nav-link" href="#">
              关于我们
            </a>
            <div id="jlc-tu1">
              <ol class="llpp" >
                <div id="llp"><img src="./img/0/18.png" alt=""></div>
                <div><img src="./img/0/19.png" alt=""></div>
                <!-- <div><img src="./img/0/2.png" alt=""></div> -->
              </ol>
            </div>
          </li>
        </ul>
        <!-- 先写搜索区域 -->
        <!-- <div class="xz-search bg-white d-flex justify-content-between"> -->
          
          <!-- 输入框 -->
          <!-- <input type="text" class="border-0"> -->
          <!-- 放大镜的图按钮 -->
          <!-- <a href="#">
            <img src="./img/0/下载.png" alt="">
          </a>
        </div> -->
        <!-- 菜单区 -->
       

      </div>
      <button class="btn btn-dark" data-toggle="collapse" data-target="#show1"><img src="./img/0/下载.png" alt=""></button>
      <div class="jlc-en"><a href="#">EN/英文版</a></div>
    </nav>
    <div class="collapse box" id="show1"> 
      <div class="xz-search bg-white d-flex justify-content-between mt-2">
          
      <!-- 输入框 -->
      <input type="text" class="border-0 ml-2 bg-warning mt-2 mb-2" placeholder="请输入要搜索...">
      <!-- 放大镜的图按钮 -->
      <a href="#" class="bg-primary">
        <img src="./img/0/下载.png" alt="" class="ml-3 mr-3 mt-1">
      </a>
    </div>
   </div>
  

    <!-- 轮播图 data-ride="carousel" 负责定时器移动项目  slide负责平滑过渡的类-->
    <div  class="carousel slide " data-ride="carousel " id="banner">
      <!-- 大图片区 carousel-inner -->
      <div class="carousel-inner">
        <!-- 轮播的一张图 carousel-item -->
        <div class="carousel-item active">
          <img src="./img/1/JNCMUHVkIXeMAFF.png" class="w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="./img/1/JNCNKZjLuDeDRRt.png" alt="" class="w-100">
        </div>
        <div class="carousel-item ">
          <img src="./img/1/JNCMUHVkIXeMAFF.png" class="w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="./img/1/JNCNKZjLuDeDRRt.png" alt="" class="w-100">
        </div>
       
        
      </div>
      <!-- 左右切换按钮 href="#banner" 控制这个轮播图-->
      <!-- data-slide="prev" 控制上一个 -->
      <!-- data-slide="next" 控制下一个 -->
      <!-- <a href="#banner" class="carousel-control-prev xz-lr" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#banner" class="carousel-control-next xz-lr" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a> -->
      <!-- 指示符(就是小点或线) -->
      <ul class="carousel-indicators llap" >
        <li class="active" data-slide-to="0" data-target="#banner mr-5" ></li>
        <li data-slide-to="1" data-target="#banner" ></li>
        <li data-slide-to="2" data-target="#banner"></li>
        
      </ul>
    </div>
 
    <!-- 飞机图片 -->
    <div class="mbox_wrap2--3PiRp_ swiper-slide swiper-slide-prev jlc" style="height: 714px;">
      <div class="wenhua_wrap0--1ErJYY"
        style="background-image: url(&quot;https://www.jnc.cn/files/20200515/ACTIVITY/image/JNCbEOevPHAHwlI.jpg&quot;); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%;">
        <div class="wenhua--3BidE5 jlc-1">
          <p class="size1--2Q7K9e jlcp-1">2020</p>
          <p class="size2--3KCB-c jlcp-2">剑南春环球文化之旅</p>
          <div class="wenhua_imgs--2pC82p ">
            <div class="wenhua_wrap--1FzmOM   mt-5 ">
            <div class="wenhua_wrap--1FzmOM d-flex justify-content-around mt-5  ">
              <div class="row jlcp-div   align-items-center justify-content-between">
                <div class="col-lg-3 col-sm-12  col-md-6">
                  <div data-swiper-animate-effect="zoomIn" class="img_item--2iiiyE ani show--2dW4KA ">
                    <div class="img_wrap--1UbwbD "><img
                        src="./img/2/2.png"></div>
                    <div class="title--K-0yal text-center">南极之旅</div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-12 col-md-6">
                  <div data-swiper-animate-effect="zoomIn" class="img_item--2iiiyE ani show--2dW4KA">
                    <div class="img_wrap--1UbwbD"><img
                        src="./img/2/3.png"></div>
                    <div class="title--K-0yal text-center">东京之旅</div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-12  col-md-6">
                  <div data-swiper-animate-effect="zoomIn" class="img_item--2iiiyE ani show--2dW4KA">
                    <div class="img_wrap--1UbwbD"><img
                        src="./img/2/4.png"></div>
                    <div class="title--K-0yal text-center">欧洲豪门皇家之旅</div>
                  </div>
                </div>
                <div class="col-lg-3 col-sm-12  col-md-6 ">
                  <div data-swiper-animate-effect="zoomIn" class="img_item--2iiiyE ani show--2dW4KA">
                    <div class="img_wrap--1UbwbD"><img
                        src="./img/2/5.png"></div>
                    <div class="title--K-0yal text-center">国内双人游</div>
                  </div>
                </div>
              </div>
             
           
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 白酒历史文化 -->
  <div class="jlc-3-bg">

    <div class="jlc-table">
      <div class=" justify-content-between d-flex flex-lg-row flex-sm-column  ">
        <div class="jlc-card1">
          <img src="./img/3/1.png" alt="" class="">
          <div class="jlc-div-p">
            <p class="jlc-1-1">专利</p>
            <p class="jlc-1-2">“挥发系数鉴别年份酒的方法”获国家发明专利</p>
          </div>
        </div>
        <div class="jlc-card1">
          <img src="./img/3/2.png" alt="">
          <div class="jlc-div-p">
            <p class="jlc-1-1">浓香</p>
            <p class="jlc-1-2">取天地精华，酿中国正宗五粮浓香白酒</p>

          </div>
        </div>
        <div class="jlc-card1">
          <img src="./img/3/3.png" alt="">
          <div class="jlc-div-p">
            <p class="jlc-1-1">御酒</p>
            <p class="jlc-1-2">载入正史至今尚存的唐代宫廷御酒</p>
          </div>
        </div>
      </div>
      <div class=" justify-content-between d-flex flex-lg-row flex-sm-column ">
        <div class="jlc-card2">
          <img src="./img/3/4.png" alt="" class="">
          <div class="jlc-div-p">
            <p class="jlc-1-1">匠心</p>
            <p class="jlc-1-2">1500年匠心坚持 御酒品质始终如一</p>
          </div>
        </div>
        <div class="jlc-card2">
          <img src="./img/3/5.png" alt="">
          <div class="jlc-div-p">
            <p class="jlc-1-1">名酒</p>
            <p class="jlc-1-2">蝉联“中国名酒”称号，获多项国内外大奖</p>
          </div>
        </div>
        <div class="jlc-card2">
          <img src="./img/3/6.png" alt="">
          <div class="jlc-div-p">
            <p class="jlc-1-1">万吨</p>
            <p class="jlc-1-2">拥有多个万吨级原酒陶坛贮存库</p>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright index_f jlc-footer-b">
      <a>四川剑南春(集团)有限责任公司</a>&nbsp;&nbsp;All Rights Reserved&nbsp;&nbsp;
    <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备05018250号</a>
    &nbsp;&nbsp;
    <img src="./img/3/7.png" width="14" height="14" style="vertical-align: top;">川公网安备
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51068302000111"
      target="_blank">51068302000111号</a>
    </div>
    
    
  </div>
   <!-- foot 底部 最后一个部分结束 -->
  <div class="container ">
    <div class="row jlc-footer-box ">
      <div class="col-lg-2 col-sm-12 m-0 p-0 jlc-footer-first">
<div class="jlc-footer-item text-center ">
          <img src="./img/4/1.png" alt="" class="mt-3">
          <p class="mt-3">招商管理</p>
          <div class="llp ">
<div class="jlc-item-1 d-flex  ">

            <div class="">
              <img src="./img/4/old.png" alt="" class="w-45 mt-3">
              <p class="mt-3">三重八关防伪体系</p>
            </div>
            <div class="ml-3 ">
              <img src="./img/4/new.png" alt="" class="w-45 mt-3">
              <p class="mt-3">全新三维一体防伪</p>
            </div>

          </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2 col-sm-12  m-0 p-0 jlc-footer-first">
        <div class="jlc-footer-item text-center">
          <img src="./img/4/2.png" alt="" class="mt-3">
          <p class="mt-3">招商管理</p>
        </div>
      </div>
      <div class="col-lg-2 col-sm-12  m-0 p-0 jlc-footer-first">
        <div class="jlc-footer-item text-center">
          <img src="./img/4/3.png" alt="" class="mt-3">
          <p class="mt-3">招商管理</p>
        </div>
      </div>
      <div class="col-lg-2 col-sm-12  m-0 p-0 jlc-footer-first">
        <div class="jlc-footer-item text-center">
          <img src="./img/4/4.png" alt="" class="mt-3">
          <p class="mt-3">招商管理</p>
          <div class="jlc-item-mao ">
            <img src="./img/4/mao.png" alt="" class="mr-5">
            <img src="./img/4/jing.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-lg-2 col-sm-12  m-0 p-0 jlc-footer-first">
        <div class="jlc-footer-item text-center">
          <img src="./img/4/5.png" alt="" class="mt-3">
          <p class="mt-3">招商管理</p>

        </div>
      </div>
      <div class="col-lg-2 col-sm-12  m-0 p-0 jlc-footer-first">
        <div class="jlc-footer-item text-center">
          <img src="./img/4/6.png" alt="" class="mt-3">
          <p class="mt-3">招商管理</p>
          <div class="llp">
          <div class="jlc-item-1 d-flex">
            <div>
              <img src="./img/4/old.png" alt="" class="w-45 mt-3">
              <p class="mt-3">剑南春微信阅读号</p>
            </div>
            <div class="ml-3">
              <img src="./img/4/new.png" alt="" class="w-45 mt-3">
              <p class="mt-3"> 剑南春微信订阅号</p>
            </div>
          </div>
          </div>
        </div>
      </div>



    </div>
 
</body>

</html>



